<template>
  <div v-title :data-title="this.$route.query.name">
    <!-- 悬浮栏 -->
    <div class="float">
      <el-button
        type="primary"
        icon="el-icon-shopping-cart-2"
        style="
          display: inline-block;
          margin: 6%;
          width: 50px;
          height: 50px;
          font-size: 20px;
        "
        @click="goShopCar"
        circle
      ></el-button>
      <!-- <el-button
        type="danger"
        icon="el-icon-warning-outline"
        style="display: inline-block; margin: 6%"
        circle
      ></el-button> -->
    </div>
    <!-- <div class="logoAndSerch">
      <div class="findPosition">
        <span
          style="
            display: inline-block;
            height: 40px;
            width: 40%;
            vertical-align: middle;
          "
        >
          <el-input v-model="input"></el-input>
        </span>
        <span style="display: inline-block; vertical-align: middle">
          <el-button type="primary" @click="search" plain>搜索</el-button>
        </span>
      </div>
    </div> -->
    <el-container class="allc">
      <!--页面主体区域-->
      <el-container>
        <!--主内容区域-->
        <el-main class="main" style="overflow: visible">
          <!-- 第一部分：商品的简介 -->
          <div class="showGood1">
            <!-- <span>
              <button style="float: right" @click="reportGood()">举报</button>
            </span> -->
            <div class="pic">
              <img :src="this.goodList.imageURL" height="290px" width="83%" />
            </div>
            <div class="show">
              <div style="display: flex">
                <div
                  style="
                    font-size: 16px;
                    text-align: left;
                    margin: 8px;
                    font-family: '微软雅黑';
                    font-weight: 700;
                    line-height: 22px;
                    width: 75%;
                  ">
                  {{ this.goodList.name }}
                </div>
                <div style="margin-top: 5px; float: right; width: 25%">
                  <goodReport
                    :goodId="this.goodId"
                    :goodName="this.goodList.name"
                  />
                </div>
              </div>
              <div
                style="
                  margin: 8px;
                  font-size: 12px;
                  line-height: 16px;
                  color: #333;
                "
              >
                <span>{{ this.goodList.author }}著/</span>
                <span>{{ this.goodList.translator }}译；</span>
                <span
                  >{{ this.goodList.pressHorse
                  }}{{ this.goodList.publicationDate }}出品/</span
                >
                <span>{{ this.goodList.updateDate }}更新/</span>
                <span>{{ this.goodList.category }}</span>
              </div>
              <div class="price">
                <div style="margin: 10px">
                  售价&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="color: #8c222c; font-size: 22px; font-weight: 700"
                    >￥{{ this.goodList.price }}</span
                  >
                </div>
                <div style="margin: 10px">
                  品相&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="color: #bf7f5f；font-size: 18px"
                    >{{ this.goodList.appearance }}</span
                  >
                </div>
              </div>
              <div
                style="
                  font-size: 12px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  font-weight: 400;
                  line-height: 22px;
                  color: #999;
                "
              >
                <span>版本:{{ this.goodList.version }}</span>
                &nbsp; &nbsp;
                <span>更新于"{{ this.goodList.updateDate }}"</span>
                &nbsp;&nbsp;
                <span>浏览次数：{{ this.goodList.viewCount }}次</span>
              </div>
              <hr style="color: #999" />
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  line-height: 22px;
                "
              >
                <span>
                  数量：
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="this.goodList.store"
                    label="商品数量"
                    size="mini"
                  >
                  </el-input-number>
                </span>
                &nbsp; &nbsp;
                <span style="font-weight: 400; font-size: 14px; color: #999"
                  >库存：{{ this.goodList.store }}</span
                >
              </div>
              <br />
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  margin: 8px;
                  font-family: '微软雅黑';
                  line-height: 22px;
                "
              >
                <el-button
                  @click="addToShoppingCar(goodId, userId, num)"
                  type="danger"
                  icon="el-icon-shopping-cart-2"
                  plain
                >
                  加入购物车
                </el-button>
                <el-button
                  type="primary"
                  @click="buy(num)"
                  icon="el-icon-shopping-bag-1"
                  plain
                  >购买</el-button
                >
                <el-button
                  type="warning"
                  :icon="ifCollection"
                  @click="ifCollectionThis()"
                  size="mini"
                  plain
                  style="float: right"
                >
                  {{ this.ifCollection2 }}
                </el-button>
              </div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <!-- 卖家 -->
            <div class="sell">
              <div style="text-align: center">
                <img :src="this.seList.imageURL" height="80px" width="80px" />
              </div>
              <div
                style="
                  font-size: 14px;
                  text-align: left;
                  line-height: 22px;
                  background-color: white;
                  height: 45px;
                "
              >
                <div style="color: #999; margin: 10px; text-align: center">
                  昵称:&nbsp;&nbsp;{{ this.seList.nickname }}
                </div>
              </div>
              <div style="text-align: center; padding: 10px">
                <el-button
                  icon="el-icon-chat-line-round"
                  plain
                  @click="openVis"
                >
                  联系卖家
                </el-button>
                <el-dialog :visible.sync="visable" width="60%">
                  <div style="min-height: 380px">
                    <div
                      class="chatSeller"
                      style="
                        width: 100%;
                        height: 600px;
                        position: fixed;
                        position: relative;
                      "
                    >
                      <div
                        class="chatInner"
                        style="
                          height: 480px;
                          width: 90%;
                          margin-left: 5%;
                          border: solid 1px #c0c0f1;
                          border-radius: 4px;
                        "
                      >
                        <div
                          class="header"
                          style="
                            text-align: left;
                            display: flex;
                            border-bottom: solid 1px #c0c0f1;
                            background-color: #409eff;
                          "
                        >
                          <div style="width: 50px; margin-top: 5px">
                            <el-avatar
                              class="avatar"
                              :src="seList.imageURL"
                              :size="40"
                              style="margin-left: 15px; width: 40px"
                            >
                            </el-avatar>
                          </div>
                          <div style="width: 200px; margin: auto 0">
                            <div style="margin-left: 10px; font-size: 18px">
                              <span style="color: #000; font-weight: bold">
                                {{ seList.nickname }}
                              </span>
                            </div>
                          </div>
                        </div>
                        <div
                          class="inner"
                          id="inner"
                          style="overflow: auto; height: 420px"
                        >
                          <li
                            class="chatItem"
                            v-for="(item, index) in chatList"
                            :key="'item' + index"
                          >
                            <div
                              v-if="item.mine"
                              style="
                                position: relative;
                                padding-right: 60px;
                                min-height: 68px;
                                text-align: right;
                                margin-bottom: 10px;
                              "
                            >
                              <div
                                style="
                                  position: absolute;
                                  display: inline-block;
                                  vertical-align: top;
                                  left: auto;
                                  right: 0px;
                                "
                              >
                                <el-avatar
                                  :src="item.img"
                                  :size="50"
                                  style="width: 50px; margin-right: 10px"
                                />
                                <cite
                                  style="
                                    position: absolute;
                                    right: 60px;
                                    top: -2px;
                                    line-height: 24px;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    color: #999;
                                    text-align: right;
                                    font-style: normal;
                                  "
                                >
                                  <span style="margin-right: 5px">
                                    {{ item.nickname }}
                                  </span>
                                  <span style="margin-right: 10px">
                                    {{ item.mesgTime }}
                                  </span>
                                </cite>
                              </div>
                              <div
                                style="
                                  margin-right: 10px;
                                  right: 0px;
                                  text-align: right;
                                  background-color: #409eff;
                                  color: #fff;
                                  max-width: 75%;
                                  padding: 8px 15px;
                                  position: relative;
                                  margin-top: 25px;
                                  display: inline-block;
                                  vertical-align: top;
                                "
                              >
                                <span
                                  v-html="analyzeEmoji(item.content)"
                                  style="
                                    padding: 0;
                                    margin: 0;
                                    display: inline-block;
                                    display: flex;
                                    text-align: left;
                                  "
                                >
                                  {{ analyzeEmoji(item.content) }}
                                </span>
                              </div>
                            </div>
                            <div
                              v-if="!item.mine"
                              style="
                                position: relative;
                                padding-left: 60px;
                                min-height: 68px;
                                text-align: left;
                                margin-top: 5px;
                              "
                            >
                              <div
                                style="
                                  position: absolute;
                                  display: inline-block;
                                  vertical-align: top;
                                  left: 10px;
                                  right: auto;
                                "
                              >
                                <el-avatar
                                  :src="item.img"
                                  :size="50"
                                  style="width: 50px; margin-right: 10px"
                                />
                                <cite
                                  style="
                                    position: absolute;
                                    left: 60px;
                                    top: -2px;
                                    line-height: 24px;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    color: #999;
                                    text-align: left;
                                    font-style: normal;
                                  "
                                >
                                  <span>{{ item.nickname }} </span>
                                  <span style="margin-left: 5px">{{
                                    item.mesgTime
                                  }}</span>
                                </cite>
                              </div>
                              <div
                                style="
                                  margin-left: 10px;
                                  left: 0px;
                                  text-align: left;
                                  background-color: #f3f3f3;
                                  color: #000;
                                  max-width: 75%;
                                  padding: 8px 15px;
                                  position: relative;
                                  margin-top: 25px;
                                  display: inline-block;
                                  vertical-align: top;
                                "
                              >
                                <span
                                  v-html="analyzeChatEmoji(item.content)"
                                  style="
                                    padding: 0;
                                    margin: 0;
                                    display: inline-block;
                                    display: flex;
                                    text-align: left;
                                  "
                                >
                                  {{ analyzeChatEmoji(item.content) }}
                                </span>
                              </div>
                            </div>
                          </li>
                        </div>
                      </div>
                      <div
                        class="input"
                        ref="input"
                        style="width: 90%; margin-left: 5%"
                      >
                        <form>
                          <div>
                            <el-input
                              type="textarea"
                              :rows="3"
                              placeholder="请输入您的消息"
                              v-model="inputText"
                              maxlength="100"
                              show-word-limit
                              resize="none"
                              style="width: 100%"
                            >
                            </el-input>
                          </div>
                          <div
                            :class="emojiBody ? 'OwO' : 'OwO OwO-open'"
                            style="float: left"
                          >
                            <div
                              class="OwO-logo"
                              @click="emojiBody = !emojiBody"
                            >
                              <span>OwO表情</span>
                            </div>
                            <div class="OwO-body">
                              <ul class="OwO-items OwO-items-show">
                                <li
                                  class="OwO-item"
                                  v-for="(oitem, index) in OwOlist"
                                  :key="'oitem' + index"
                                  @click="choseEmoji(oitem.title)"
                                >
                                  <img
                                    :src="
                                      require('../../static/emoji/' + oitem.url)
                                    "
                                    alt=""
                                  />
                                </li>
                              </ul>
                              <div class="OwO-bar">
                                <ul class="OwO-packages">
                                  <li class="OwO-package-active">Emoji</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <el-button @click="sendChatMsg" style="float: right"
                            >发送</el-button
                          >
                        </form>
                      </div>
                    </div>
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
          <div style="background-color: white; width: 100%">
            <!-- 下侧大区域 -->
            <!-- 左侧区域 -->
            <div class="leftPlace">
              <el-menu class="el-menu-vertical-demo" text-color="black">
                <el-menu-item index="0" disabled style="line-height: 32px">
                  <i class="el-icon-document"></i>
                  <span slot="title" style="color: black">相关种类</span>
                </el-menu-item>
                <el-menu-item
                  style="font-size: 14px; line-height: 32px"
                  :index="classg.id + ' '"
                  v-for="classg in menuList"
                  :key="classg.id"
                >
                  <span @click="search2(classg.id)">{{ classg.name }}</span>
                </el-menu-item>
                <!-- <el-button slot="reference">{{ classg.name }}</el-button> -->
              </el-menu>
            </div>
            <!-- 右侧区域 -->
            <div class="rightPlace">
              <!-- 上侧区域：详细内容和评论 -->
              <div class="top">
                <el-tabs type="border-card">
                  <el-tab-pane label="商品详情" style="">
                    <div class="showGood2" style="min-height: 300px">
                      <div class="goodOtherInf">
                        <div
                          style="
                            font-size: 16px;
                            text-align: left;
                            margin: 8px;
                            margin-left: 0px;
                            font-family: '微软雅黑';
                            font-weight: 700;
                            line-height: 22px;
                          "
                        >
                          商品描述：
                        </div>
                        <div>{{ this.goodList.describe }}</div>
                        <hr />
                        <div
                          v-for="it in this.goodList.moreImagesURL"
                          :key="it"
                          style="
                            text-align: center;
                            display: inline-block;
                            vertical-align: middle;
                            margin: 8px;
                            height: 220px;
                            width: 220px;
                            border: 1px solid #ddd;
                            padding: 2px;
                          "
                        >
                          <div>
                            <img
                              :src="it"
                              style="height: 200px; width: 200px"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="评论">
                    <!-- 评论区-->
                    <commit :goodId="this.goodId" />
                  </el-tab-pane>
                </el-tabs>
              </div>
              <!--作者其他作品-->			  
			  <div class="showGoods">
			    <div
			      style="
			        font-size: 16px;
			        text-align: left;
			        margin: 8px;
			        font-weight: 300;
			        color: #999;
			      "
			    >
			      作者其他作品：
			    </div>
			    <div
			      class="goods"
			      v-for="g in otherBookList"
			      :key="g.id"
			      :index="g.id"
			    >
			      <div @click="goShop(g.id, g.name)">
			        <div style="margin: 8px; background-color: white">
			          <img :src="g.imageURL" height="100px" width="90px" />
			        </div>
			        <div class="goodInf">
			          <div style="font-size: 13px; height: 40px">
			            {{ g.name }}
			          </div>
			          <div style="font-size: 13px">
			            品相：{{ g.appearance }} 库存：{{ g.store }}
			          </div>
			          <div>
			            价格：<span style="color: red; font-size: 18px">{{
			              g.price
			            }}</span
			            >￥
			          </div>
			        </div>
			      </div>
			    </div>
			  </div>
			  
              <!--推荐-->
              <div class="showGoods">
                <div
                  style="
                    font-size: 16px;
                    text-align: left;
                    margin: 8px;
                    font-weight: 300;
                    color: #999;
                  "
                >
                  相关书籍推荐：
                </div>
                <div
                  class="goods"
                  v-for="g in otherShopList"
                  :key="g.id"
                  :index="g.id"
                >
                  <div @click="goShop(g.id, g.name)">
                    <div style="margin: 8px; background-color: white">
                      <img :src="g.imageURL" height="100px" width="90px" />
                    </div>
                    <div class="goodInf">
                      <div style="font-size: 13px; height: 40px">
                        {{ g.name }}
                      </div>
                      <div style="font-size: 13px">
                        品相：{{ g.appearance }} 库存：{{ g.store }}
                      </div>
                      <div>
                        价格：<span style="color: red; font-size: 18px">{{
                          g.price
                        }}</span
                        >￥
                      </div>
                    </div>
                  </div>
                </div>
              </div>
			  
              <div class="showGoods">
                <div
                  style="
                    font-size: 16px;
                    text-align: left;
                    margin: 8px;
                    font-weight: 300;
                    color: #999;
                  "
                >
                  浏览过此书的人还看了:
                </div>
                <div
                  class="goods"
                  v-for="g in seeShopList"
                  :key="g.id"
                  :index="g.id"
                >
                  <div @click="goShop(g.id, g.name)">
                    <div style="margin: 8px; background-color: white">
                      <img :src="g.imageURL" height="100px" width="90px" />
                    </div>
                    <div class="goodInf">
                      <div style="font-size: 13px; height: 40px">
                        {{ g.name }}
                      </div>
                      <div style="font-size: 13px">
                        品相：{{ g.appearance }} 库存：{{ g.store }}
                      </div>
                      <div>
                        价格：<span style="color: red; font-size: 18px">{{
                          g.price
                        }}</span
                        >￥
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import goodReport from "@/components/Report/GoodReport.vue";
import commit from "@/components/Commit.vue";
import base from "../../api/base";
import api from "../../api/index";
import { mapState } from "vuex";
export default {
  components: {
    goodReport,
    commit,
  },
  created() {
    this.goodId = this.$route.query.goodId;
    this.userId = this.user.userId;
    // console.log(this.$route.query);
    this.getGoodDetail(this.userId, this.goodId);
    this.getSellerInfo(this.goodId);
    this.getRelevantGoods(this.goodId);
    this.isInCollection();
    this.ifOnline();
    this.getRelevantCategories();
    this.getAlsoViewGoods(8);
  },
  data() {
    return {
      input: "",
      zero: 0,
      onlineState: "success",
      onlineChat: "离线留言",
      online: "离线",
      value: 3.8, //评分，暂时的
      ifCollection: "el-icon-star-off",
      ifCollection2: "收藏",
      userId: "", //用户id
      goodId: "", //商品id
      num: 1, //选择商品的数量
      seList: [], //卖家信息
      goodList: [], //商品列表
      writer: [],
      menuList: [], //类别
      otherShopList: [],
      otherBookList: [],
      seeShopList: [],
      //评论相关
      userImg: "",
      nickname: "",
      isLogin: false,
      // respondBox: "", //评论表单
      respondOpen: false, //回复开关
      emojiBody: true, //评论表情打开控制
      respondEmojiBody: true, //回复表情打开控制
      listDom: "", //评论列表
      tmsgBox: "", //总评论盒子
      commitText: "", //评论框输入内容
      respondText: "", //回复框输入内容
      currentTarget: "",
      replyForm: {
        index: "",
        replyName: "",
      },
      //评论列表数据
      commentList: [],
      pageId: 0, //当前第几页
      goodId: 0, //商品id
      hasMore: true,
      haslogin: true,
      leaveId: 0, //回复评论的当前的commentId
      leavePid: "", //赞赏等其他模块的分类id
      pid: "", //回复评论的一级commentId
      OwOlist: [
        //表情包和表情路径
        { title: "微笑", url: "weixiao.gif" },
        { title: "嘻嘻", url: "xixi.gif" },
        { title: "哈哈", url: "haha.gif" },
        { title: "可爱", url: "keai.gif" },
        { title: "可怜", url: "kelian.gif" },
        { title: "挖鼻", url: "wabi.gif" },
        { title: "吃惊", url: "chijing.gif" },
        { title: "害羞", url: "haixiu.gif" },
        { title: "挤眼", url: "jiyan.gif" },
        { title: "闭嘴", url: "bizui.gif" },
        { title: "鄙视", url: "bishi.gif" },
        { title: "爱你", url: "aini.gif" },
        { title: "泪", url: "lei.gif" },
        { title: "偷笑", url: "touxiao.gif" },
        { title: "亲亲", url: "qinqin.gif" },
        { title: "生病", url: "shengbing.gif" },
        { title: "太开心", url: "taikaixin.gif" },
        { title: "白眼", url: "baiyan.gif" },
        { title: "右哼哼", url: "youhengheng.gif" },
        { title: "左哼哼", url: "zuohengheng.gif" },
        { title: "嘘", url: "xu.gif" },
        { title: "衰", url: "shuai.gif" },
        { title: "吐", url: "tu.gif" },
        { title: "哈欠", url: "haqian.gif" },
        { title: "抱抱", url: "baobao.gif" },
        { title: "怒", url: "nu.gif" },
        { title: "疑问", url: "yiwen.gif" },
        { title: "馋嘴", url: "chanzui.gif" },
        { title: "拜拜", url: "baibai.gif" },
        { title: "思考", url: "sikao.gif" },
        { title: "汗", url: "han.gif" },
        { title: "困", url: "kun.gif" },
        { title: "睡", url: "shui.gif" },
        { title: "钱", url: "qian.gif" },
        { title: "失望", url: "shiwang.gif" },
        { title: "酷", url: "ku.gif" },
        { title: "色", url: "se.gif" },
        { title: "哼", url: "heng.gif" },
        { title: "鼓掌", url: "guzhang.gif" },
        { title: "晕", url: "yun.gif" },
        { title: "悲伤", url: "beishang.gif" },
        { title: "抓狂", url: "zhuakuang.gif" },
        { title: "黑线", url: "heixian.gif" },
        { title: "阴险", url: "yinxian.gif" },
        { title: "怒骂", url: "numa.gif" },
        { title: "互粉", url: "hufen.gif" },
        { title: "书呆子", url: "shudaizi.gif" },
        { title: "愤怒", url: "fennu.gif" },
        { title: "感冒", url: "ganmao.gif" },
        { title: "心", url: "xin.gif" },
        { title: "伤心", url: "shangxin.gif" },
        { title: "猪", url: "zhu.gif" },
        { title: "熊猫", url: "xiongmao.gif" },
        { title: "兔子", url: "tuzi.gif" },
        { title: "喔克", url: "ok.gif" },
        { title: "耶", url: "ye.gif" },
        { title: "棒棒", url: "good.gif" },
        { title: "不", url: "no.gif" },
        { title: "赞", url: "zan.gif" },
        { title: "来", url: "lai.gif" },
        { title: "弱", url: "ruo.gif" },
        { title: "草泥马", url: "caonima.gif" },
        { title: "神马", url: "shenma.gif" },
        { title: "囧", url: "jiong.gif" },
        { title: "浮云", url: "fuyun.gif" },
        { title: "给力", url: "geili.gif" },
        { title: "围观", url: "weiguan.gif" },
        { title: "威武", url: "weiwu.gif" },
        { title: "话筒", url: "huatong.gif" },
        { title: "蜡烛", url: "lazhu.gif" },
        { title: "蛋糕", url: "dangao.gif" },
        { title: "发红包", url: "fahongbao.gif" },
      ],
      //联系商家相关
      visable: false,
      chatEmojiBody: true, //回复表情打开控制
      inputText: "",
      chatList: [],
    };
  },
  computed: {
    ...mapState("login", ["user"]),
  },
  methods: {
    //卖家是否在线
    ifOnline() {
      if (this.seList.isOnline == 1) {
        this.online = "在线";
        this.onlineChat = "联系卖家";
        this.onlineState = "success";
      } else {
        this.online = "离线";
        this.onlineChat = "离线留言";
        this.onlineState = "info";
      }
    },
    //去往商品界面
    goShop(goodId, goodName) {
      this.seList = [];
      this.goodList = [];
      this.otherShopList = [];
      this.goodId = goodId;
      this.getGoodDetail(this.userId, this.goodId);
      this.getSellerInfo(this.goodId);
      this.getRelevantGoods(this.goodId);
      this.$router.push({
        path: "/showgoods",
        query: { userId: this.userId, goodId: goodId, name: goodName },
      });
      location.reload();
    },
    //联系商家
    getGoodDetail(userId, goodId) {
      //获得商品的信息
      this.$http
        .get(base.baseUrl + "/good/getGoodDetail", {
          params: { userId: userId, goodId: goodId },
        })
        .then((res) => {
          this.goodList = res.data;
          this.goodList.imageURL = base.baseUrl + this.goodList.imageURL;
          for (var i = 0; i < this.goodList.moreImagesURL.length; i++) {
            this.goodList.moreImagesURL[i] =
              base.baseUrl + this.goodList.moreImagesURL[i];
          }
        });
    },
    handleChange() {
      //商品数量监听函数
      console.log(this.num);
    },
    buy(num) {
      //购买
      if (this.userId == "") {
        this.$router.push({
          path: "/login",
          query: {
            perPath: window.location.hash,
          },
        });
        return;
      } else {
        if (this.userId != this.seList.id) {
          let goodId = [];
          goodId.push(this.goodId);
          this.$router.push({
            path: "/order",
            query: {
              userId: this.userId,
              goodId: goodId,
              num: num,
            },
          });
        } else {
          this.$message({
            showClose: true,
            message: "不能购买自己的商品",
            type: "error",
          });
        }
      }
    },
    search2(id) {
      let routeUrl = this.$router.resolve({
        path: "/showcrid",
        query: {
          id: id,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    addToShoppingCar(goodId) {
      //添加到购物车addToShoppingCar
      if (this.userId == "") {
        this.$router.push({
          path: "/login",
          query: {
            perPath: window.location.hash,
          },
        });
      } else {
        if (this.userId != this.seList.id) {
          this.$http
            .get(base.baseUrl + "/good/addToShoppingCar", {
              params: { goodId: goodId, userId: this.userId, count: this.num },
            })
            .then((res) => {
              if (res.data == 0) {
                this.$message({
                  showClose: true,
                  message: "添加失败",
                  type: "false",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message({
            showClose: true,
            message: "不能把自己的商品加入购物车",
            type: "false",
          });
        }
      }
    },
    //判断是取消收藏还是添加收藏
    ifCollectionThis() {
      if (this.userId == "") {
        this.$router.push({
          path: "/login",
          query: {
            perPath: window.location.hash,
          },
        });
      } else {
        if (this.ifCollection2 == "收藏") {
          this.addToCollection();
        } else {
          this.delCollectionItem(this.goodId);
        }
      }
    },
    //取消收藏
    delCollectionItem(goodId) {
      this.$http
        .get(base.baseUrl + "/collection/delCollectionItem", {
          params: { userId: this.userId, goodId: goodId },
        })
        .then((res) => {
          if (res.data == 1) {
            this.$message({
              showClose: true,
              message: "取消成功",
              type: "success",
            });
            this.isInCollection();
          } else {
            this.$message({
              showClose: true,
              message: "取消失败",
              type: "false",
            });
          }
        });
    },
    addToCollection() {
      //添加到收藏
      if (this.userId != this.seList.id) {
        this.$http
          .get(base.baseUrl + "/good/addToCollection", {
            params: { userId: this.userId, goodId: this.goodId },
          })
          .then((res) => {
            if (res.data == 1) {
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success",
              });
              this.isInCollection();
            } else {
              this.$message({
                showClose: true,
                message: "添加失败",
                type: "false",
              });
            }
          });
      } else {
        this.$message({
          showClose: true,
          message: "不能收藏自己的商品",
          type: "false",
        });
      }
    },
    isInCollection() {
      //判断是否已经在收藏中
      this.$http
        .get(base.baseUrl + "/good/isInCollection", {
          params: { userId: this.userId, goodId: this.goodId },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            this.ifCollection = "el-icon-star-on";
            this.ifCollection2 = "取消收藏";
          } else {
            this.ifCollection = "el-icon-star-off";
            this.ifCollection2 = "收藏";
          }
          console.log(this.ifCollection);
          return res.data;
        });
    },
    getSellerInfo(goodId) {
      //获取卖家信息
      this.$http
        .get(base.baseUrl + "/good/getSellerInfo", {
          params: { goodId: goodId },
        })
        .then((res) => {
          this.seList = res.data;
          this.seList.imageURL = base.baseUrl + this.seList.imageURL;
          console.log("卖家信息");
          console.log(this.seList);
        });
    },
    getAlsoViewGoods(count) {
      this.$http
        .get(base.baseUrl + "/good/getAlsoViewGoods", {
          params: { userId: this.userId, goodId: this.goodId, count: count },
        })
        .then((res) => {
          this.seeShopList = res.data;
          for (var i = 0; i < this.seeShopList.length; i++) {
            this.seeShopList[i].imageURL =
              base.baseUrl + this.seeShopList[i].imageURL;
          }
          console.log("浏览过的人还浏览了");
          console.log(this.seeShopList);
        });
    },
    //获取类别
    getRelevantCategories() {
      this.$http
        .get(base.baseUrl + "/good/getRelevantCategories", {
          params: { goodId: this.goodId },
        })
        .then((res) => {
          this.menuList = res.data;
          console.log("左侧导航");
          console.log(this.menuList);
        });
    },
    getRelevantGoods(goodId) {
      //获得作者其他作品
      this.$http
        .get(base.baseUrl + "/good/getAuthorGoods", {
          params: { goodId: goodId },
        })
        .then((res) => {
          var otherBookList = res.data;
          for (var i = 0; i < otherBookList.length; i++) {
            otherBookList[i].imageURL =
              base.baseUrl + otherBookList[i].imageURL;
          }
          if (otherBookList.length > 8) {
            for (var i = 0; i < 8; i++) {
              this.otherBookList.push(otherBookList[i]);
            }
          } else {
            this.otherBookList = otherBookList;
          }
        });
      //获得相关商品
      this.$http
        .get(base.baseUrl + "/good/getRelevantGoods", {
          params: { goodId: goodId },
        })
        .then((res) => {
          var otherShopList = res.data;
          for (var i = 0; i < otherShopList.length; i++) {
            otherShopList[i].imageURL =
              base.baseUrl + otherShopList[i].imageURL;
          }
          if (otherShopList.length > 8) {
            for (var i = 0; i < 8; i++) {
              this.otherShopList.push(otherShopList[i]);
            }
          } else {
            this.otherShopList = otherShopList;
          }
        });
    },
    // addAComment(用户编号userId,商品编号goodId,回复评论的编号replyCommentId,评论内容content)
    //delAComment(userId,commentId)

    //编译表情替换成图片展示出来
    analyzeEmoji: function (cont) {
      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
      var content = cont.match(pattern1);
      var str = cont;
      if (content) {
        for (var i = 0; i < content.length; i++) {
          for (var j = 0; j < this.OwOlist.length; j++) {
            if ("[" + this.OwOlist[j].title + "]" == content[i]) {
              var src = require("../../static/emoji/" + this.OwOlist[j].url);
              break;
            }
          }
          str = str.replace(pattern2, '<img src="' + src + '"/>');
        }
      }
      return str;
    },
    openVis() {
      if (this.userId == this.seList.id) {
        this.$message.error("不能与自己联系!");
        return;
      }
      let param = new URLSearchParams();
      param.append("myUserId", this.user.userId);
      param.append("hisUserId", this.seList.id);
      param.append("mesgStartIndex", 1000);
      param.append("mesgNum", 0);
      api.getMesgs(param).then((res) => {
        this.chatList = res.data;
        for (let i = 0; i < this.chatList.length; i++) {
          if (!this.chatList[i].mine) {
            this.chatList[i].img = this.seList.imageURL;
            this.chatList[i].nickname = this.seList.nickname;
          } else {
            this.chatList[i].img = base.baseUrl + this.user.imageURL;
            this.chatList[i].nickname = this.user.nicknmae;
          }
        }
        console.log("1111111");
        console.log(this.chatList);
      });
      this.visable = true;
      this.getNews();
    },
    analyzeChatEmoji: function (cont) {
      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
      var content = cont.match(pattern1);
      var str = cont;
      if (content) {
        for (var i = 0; i < content.length; i++) {
          for (var j = 0; j < this.OwOlist.length; j++) {
            if ("[" + this.OwOlist[j].title + "]" == content[i]) {
              var src = require("../../static/emoji/" + this.OwOlist[j].url);
              break;
            }
          }
          str = str.replace(pattern2, '<img src="' + src + '"/>');
        }
      }
      return str;
    },
    choseEmoji: function (inner) {
      this.inputText += "[" + inner + "]";
    },
    sendChatMsg() {
      if (this.inputText) {
        let msgObj = {
          mesgTime: this.format(parseInt(Date.now())), //发送消息时间
          content: this.inputText,
          mine: true,
          nickname: this.user.nickname, //发送者昵称
          img: base.baseUrl + this.user.imageURL, //发送者头像
        };
        console.log(msgObj);
        //上传到服务器
        this.chatList.push(msgObj);
        let param = new URLSearchParams();
        param.append("myUserId", this.userId);
        param.append("hisUserId", this.seList.id);
        param.append("content", msgObj.content);
        api.sendText(param).then((res) => {
          if (res.data == "0") {
            return;
          } else {
            this.inputText = "";
            document.getElementById("inner").scrollTop =
              document.getElementById("inner").scrollHeight;
          }
        });
      } else {
        this.$message.error("消息内容不能为空!");
      }
    },
    //时间转换
    format(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    getNews() {
      if (this.visable == false) {
        return;
      }
      let param = new URLSearchParams();
      param.append("myUserId", this.user.userId);
      param.append("hisUserId", this.seller.id);
      param.append("mesgStartIndex", 1000);
      param.append("mesgNum", 0);
      api.getMesgs(param).then((res) => {
        this.chatList = res.data;
        console.log(res.data);
        for (let i = 0; i < this.chatList.length; i++) {
          if (!this.chatList[i].mine) {
            this.chatList[i].img = base.baseUrl + this.seller.imageURL;
            this.chatList[i].nickname = this.seller.nickname;
          } else {
            this.chatList[i].img = base.baseUrl + this.user.imageURL;
            this.chatList[i].nickname = this.user.nicknmae;
          }
        }
      });
      let that = this;
      setTimeout(function () {
        that.getNews();
      }, 10000);
    },
    search() {
      if (this.input == "") {
        this.$message.error("请输入您要搜索的商品");
        return;
      }
      let routeUrl = this.$router.resolve({
        path: "/search",
        query: {
          input: this.input,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    goShopCar() {
      this.$router.push({
        path: "/message",
        query: {
          active: "1",
        },
      });
    },
  },
};
</script>

<style scoped>
.top {
  text-align: center;
  margin-top: 10px;
}
.OwO {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.OwO .OwO-logo {
  position: relative;
  border-radius: 4px;
  color: #444;
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  padding: 0 6px;
  cursor: pointer;
  height: 30px;
  box-sizing: border-box;
  z-index: 2;
  line-height: 30px;
}
.OwO .OwO-logo:hover {
  animation: a 5s infinite ease-in-out;
  -webkit-animation: a 5s infinite ease-in-out;
}
.OwO .OwO-body {
  position: absolute;
  width: 470px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 1;
  top: 29px;
  border-radius: 0 4px 4px 4px;
  display: none;
}
.OwO-open .OwO-body {
  display: block;
}
.OwO-open .OwO-logo {
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}
.OwO-open .OwO-logo:hover {
  animation: none;
  -webkit-animation: none;
}
.OwO .OwO-items {
  max-height: 197px;
  overflow: scroll;
  font-size: 0;
  padding: 10px;
  z-index: 1;
}
.OwO .OwO-items .OwO-item {
  background: #f7f7f7;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  margin: 0 10px 12px 0;
  transition: 0.3s;
  line-height: 19px;
  font-size: 20px;
  cursor: pointer;
}
.OwO .OwO-items .OwO-item:hover {
  background: #eee;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  animation: a 5s infinite ease-in-out;
  -webkit-animation: a 5s infinite ease-in-out;
}
.OwO .OwO-body .OwO-bar {
  width: 100%;
  height: 30px;
  border-top: 1px solid #ddd;
  background: #fff;
  border-radius: 0 0 4px 4px;
  color: #444;
  margin-top: 0px;
}
.OwO .OwO-body .OwO-bar ul {
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  float: left;
}
.OwO .OwO-body .OwO-bar .OwO-packages li {
  display: inline-block;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  cursor: pointer;
  margin-right: 3px;
  text-align: center;
}
.OwO .OwO-body .OwO-bar .OwO-packages li:first-of-type {
  border-radius: 0 0 0 3px;
}
@-webkit-keyframes a {
  2% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  4% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  6% {
    -webkit-transform: translateY(1.5px) rotate(-1.5deg);
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  8% {
    -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  10% {
    -webkit-transform: translateY(2.5px) rotate(1.5deg);
    transform: translateY(2.5px) rotate(1.5deg);
  }
  12% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  14% {
    -webkit-transform: translateY(-1.5px) rotate(1.5deg);
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translateY(-0.5px) rotate(-1.5deg);
    transform: translateY(-0.5px) rotate(-1.5deg);
  }
  18% {
    -webkit-transform: translateY(0.5px) rotate(-1.5deg);
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  20% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  22% {
    -webkit-transform: translateY(0.5px) rotate(-1.5deg);
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  24% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  26% {
    -webkit-transform: translateY(0.5px) rotate(0.5deg);
    transform: translateY(0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translateY(0.5px) rotate(1.5deg);
    transform: translateY(0.5px) rotate(1.5deg);
  }
  30% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  32%,
  34% {
    -webkit-transform: translateY(1.5px) rotate(-0.5deg);
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  36% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  38% {
    -webkit-transform: translateY(1.5px) rotate(-1.5deg);
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  40% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  42% {
    -webkit-transform: translateY(2.5px) rotate(-1.5deg);
    transform: translateY(2.5px) rotate(-1.5deg);
  }
  44% {
    -webkit-transform: translateY(1.5px) rotate(0.5deg);
    transform: translateY(1.5px) rotate(0.5deg);
  }
  46% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  48% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translateY(0.5px) rotate(0.5deg);
    transform: translateY(0.5px) rotate(0.5deg);
  }
  52% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  54% {
    -webkit-transform: translateY(-1.5px) rotate(1.5deg);
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  56% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translateY(0.5px) rotate(2.5deg);
    transform: translateY(0.5px) rotate(2.5deg);
  }
  60% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  62% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  64% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  66% {
    -webkit-transform: translateY(1.5px) rotate(-0.5deg);
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  68% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  70% {
    -webkit-transform: translateY(1.5px) rotate(0.5deg);
    transform: translateY(1.5px) rotate(0.5deg);
  }
  72% {
    -webkit-transform: translateY(2.5px) rotate(1.5deg);
    transform: translateY(2.5px) rotate(1.5deg);
  }
  74% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  76% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  78% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  80% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  82% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  84% {
    -webkit-transform: translateY(1.5px) rotate(2.5deg);
    transform: translateY(1.5px) rotate(2.5deg);
  }
  86% {
    -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  88% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translateY(2.5px) rotate(-0.5deg);
    transform: translateY(2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translateY(0.5px) rotate(-0.5deg);
    transform: translateY(0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translateY(2.5px) rotate(0.5deg);
    transform: translateY(2.5px) rotate(0.5deg);
  }
  96% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  98% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  0%,
  to {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
}
@keyframes a {
  2% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  4% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  6% {
    -webkit-transform: translateY(1.5px) rotate(-1.5deg);
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  8% {
    -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  10% {
    -webkit-transform: translateY(2.5px) rotate(1.5deg);
    transform: translateY(2.5px) rotate(1.5deg);
  }
  12% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  14% {
    -webkit-transform: translateY(-1.5px) rotate(1.5deg);
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translateY(-0.5px) rotate(-1.5deg);
    transform: translateY(-0.5px) rotate(-1.5deg);
  }
  18% {
    -webkit-transform: translateY(0.5px) rotate(-1.5deg);
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  20% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  22% {
    -webkit-transform: translateY(0.5px) rotate(-1.5deg);
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  24% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  26% {
    -webkit-transform: translateY(0.5px) rotate(0.5deg);
    transform: translateY(0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translateY(0.5px) rotate(1.5deg);
    transform: translateY(0.5px) rotate(1.5deg);
  }
  30% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  32%,
  34% {
    -webkit-transform: translateY(1.5px) rotate(-0.5deg);
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  36% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  38% {
    -webkit-transform: translateY(1.5px) rotate(-1.5deg);
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  40% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  42% {
    -webkit-transform: translateY(2.5px) rotate(-1.5deg);
    transform: translateY(2.5px) rotate(-1.5deg);
  }
  44% {
    -webkit-transform: translateY(1.5px) rotate(0.5deg);
    transform: translateY(1.5px) rotate(0.5deg);
  }
  46% {
    -webkit-transform: translateY(-1.5px) rotate(2.5deg);
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  48% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translateY(0.5px) rotate(0.5deg);
    transform: translateY(0.5px) rotate(0.5deg);
  }
  52% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  54% {
    -webkit-transform: translateY(-1.5px) rotate(1.5deg);
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  56% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translateY(0.5px) rotate(2.5deg);
    transform: translateY(0.5px) rotate(2.5deg);
  }
  60% {
    -webkit-transform: translateY(2.5px) rotate(2.5deg);
    transform: translateY(2.5px) rotate(2.5deg);
  }
  62% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  64% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  66% {
    -webkit-transform: translateY(1.5px) rotate(-0.5deg);
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  68% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  70% {
    -webkit-transform: translateY(1.5px) rotate(0.5deg);
    transform: translateY(1.5px) rotate(0.5deg);
  }
  72% {
    -webkit-transform: translateY(2.5px) rotate(1.5deg);
    transform: translateY(2.5px) rotate(1.5deg);
  }
  74% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  76% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  78% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  80% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  82% {
    -webkit-transform: translateY(-0.5px) rotate(0.5deg);
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  84% {
    -webkit-transform: translateY(1.5px) rotate(2.5deg);
    transform: translateY(1.5px) rotate(2.5deg);
  }
  86% {
    -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  88% {
    -webkit-transform: translateY(-0.5px) rotate(2.5deg);
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translateY(2.5px) rotate(-0.5deg);
    transform: translateY(2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translateY(0.5px) rotate(-0.5deg);
    transform: translateY(0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translateY(2.5px) rotate(0.5deg);
    transform: translateY(2.5px) rotate(0.5deg);
  }
  96% {
    -webkit-transform: translateY(-0.5px) rotate(1.5deg);
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  98% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  0%,
  to {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
}
.leftPlace {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  margin: 20px 0.6% 10px -2.4%;
}
.rightPlace {
  vertical-align: top;
  display: inline-block;
  width: 66%;
  margin: 10px 0.6% 10px 0.6%;
}
.price {
  font-size: 12px;
  text-align: left;
  margin-top: 8px;
  font-family: "幼圆";
  font-weight: 400;
  color: #999;
  line-height: 20px;
  background-color: white;
  height: 70px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.logoAndSerch {
  height: 80px;
  width: 100%;
  background-color: white;
  padding: 10px;
  text-align: left;
}
.findPosition {
  height: 100px;
  width: 70%;
  vertical-align: middle;
  margin: -20px 130px 0px 470px;
  padding: 30px;
  text-align: center;
}
.main {
  right: 0;
  background-color: white;
  width: 1100px;
}
.showGood1 {
  background-color: white;
  text-align: left;
  height: 400px;
  width: 100%;
}
.showGood2 {
  text-align: left;
  border: 1px solid #ddd;
  background-color: white;
  width: 95%;
  margin: 0 auto;
}
.goodOtherInf {
  text-align: left;
  margin: 15px;
}
.showGood3 {
  text-align: left;
  border: 1px solid #fbffcd;
  background-color: white;
  width: 1000px;
  margin: 10px 280px;
  padding: 20px;
}
.sell {
  border: 1px solid #e5e5e5;
  border-top: 2px solid #97a69c;
  background-color: #fafafa;
  display: inline-block;
  height: 210px;
  width: 14%;
  margin-left: 3%;
  font-family: "幼圆";
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
  text-align: center;
}
.pic {
  height: 300px;
  width: 20%;
  display: inline-block;
  margin: 35px 0.6% 15px 9.8%;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
}
.show {
  height: 300px;
  width: 40%;
  display: inline-block;
  margin: 35px 0.6% 15px 2.6%;
  vertical-align: middle;
}
.showGoods {
  border: 1px solid #ddd;
  margin-top: 25px;
  /* float:inherit; */
  text-align: center;
  padding-bottom: 10px;
  background-color: white;
  display: inline-block;
  width: 100%;
}
.goods {
  margin: 3px 3.3%;
  height: 215px;
  width: 18%;
  text-align: center;
  float: left;
  background-color: snow;
  font-family: "幼圆";
}
.goods:hover {
  box-shadow: 3px 3px 10px #909090;
}
.goodInf {
  margin-top: 8px;
  background-color: white;
  text-align: left;
  padding: 3.3%;
  line-height: 20px;
}
.el-menu-item.is-active {
  color: black;
}
.el-menu-item {
  height: 32px;
  border-top: 1px solid #ddd;
  border-collapse: collapse;
  font-family: "幼圆";
}
.el-menu-vertical-demo {
  width: 73%;
  border: 1px solid #ddd;
  border-collapse: collapse;
  margin-left: 70px;
}
.el-divider--vertical {
  height: 345px;
  margin-left: 2%;
}
.float {
  position: fixed;
  top: 80%;
  right: 6%;
  width: 1%;
}
</style>